<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>encryptjs</title>
<script type="text/javascript" src="encrypt.js"></script>
<script type="text/javascript" src="lib/jsbn.js"></script>
<script type="text/javascript" src="lib/prng4.js"></script>
<script type="text/javascript" src="lib/rng.js"></script>
<script type="text/javascript" src="lib/base64.js"></script>
<script type="text/javascript" src="lib/rsa.js"></script>
<style type="text/css">

.z{
	border-top: 3px dashed #ccc;
	word-break:break-all;
　　word-wrap:break-word;
}
.z pre{
	color: #333;
	line-height: 1.5em;
	margin: 2em 3em 2em 3em;
	background-color: #eee;
	padding: 1em;
}
.z h2{
	margin-left: 10px;
}
.z h3{
	margin-left: 30px;
	color: #444;
}
.z h4, .z h5{
	margin-left: 30px;
}

.z label{
	color: #00f;
}

.z em{
	margin: 0px 30px;
	display: block;
	background-color: #ccc;
	padding: 1em;
	font-style: normal;
}


</style>
</head>
<body>

<h1>encryptjs</h1>
<h3><a href="https://git.oschina.net/imrnull/encryptjs" target="_blank">git project address</a></h3>
<hr>
<div class="z" id="ex1">
	<h2>MD5("abc") is</h2>
	<h3></h3>
	<pre>return encrypt.md5('abc');</pre>
</div>
<div class="z" id="ex2">
	<h2>SHA1("abc") is</h2>
	<h3></h3>
	<pre>return encrypt.sha1('abc');</pre>
</div>
<div class="z" id="ex3">
	<h2>Blob(File) Object Hash</h2>
	<h4>Convert blob to binary-string by FileReader first.</h4>
	<h5><input type="file"></h5>
	<h3>ready</h3>
	<pre>_$('#ex3 input[type="file"]').onchange = function(){
	if(!this.files.length) return;
	var reader = new FileReader();
	_$('#ex3>h3').innerHTML = this.files[0].name + ' computing...';
	reader.onload = function(){
		_$('#ex3>h3').innerHTML
			= 'sha1: ' + encrypt.sha1(this.result) + '<' + 'br>'
			+ 'md5: ' + encrypt.md5(this.result)
			;
	};
	reader.readAsArrayBuffer(this.files[0]);
	this.value = null;
};</pre>
</div>
<div class="z" id="ex4">
	<h2>Hash Helper</h2>
	<h4>
		Split blob to pieces, cal them one by one, and get then hash
		<br>
		<span>Choose hash type: </span>[
		<label>SHA1<input type="radio" value="sha1" name="hashtype" checked></label>
		<label>MD5<input type="radio" value="md5" name="hashtype"></label>
		]
	</h4>
	<h5>
		<input type="file">
	</h5>
	<h3>ready</h3>
	<pre>
_$('#ex4 input[type="file"]').onchange = function(){
	if(!this.files.length) return;
	_$('#ex4>h3').innerHTML = this.files[0].name + ' computing...';

	var pos = 0;
	var blockSize = 51200;
	var blob = this.files[0];
	var b = blob.slice(pos, pos + blockSize);
	pos += b.size;
	var helper = encrypt.createHelper(hashType, blob.size);

	function read(){
		var reader = new FileReader();
		reader.onload = function(){
			var arr = new Uint8Array(this.result);
			// to binL/B
			helper.hash(arr);
			_$('#ex4>h3').innerHTML = Math.round(pos / blob.size * 100) + '%';
			if(pos >= blob.size){
				// if eof, the helper must be fin
				helper.fin(arr.length);
				// core cal
				helper.cal();

				// to string
				var hash = helper.hex();
				_$('#ex4>h3').innerHTML = hashType + ': ' + hash;

			} else {
				// core cal
				helper.cal();
				b = blob.slice(pos, pos + blockSize);
				pos += b.size;
				read();
			}
		};
		reader.readAsArrayBuffer(b);
	};

	read();
	this.value = null;
};</pre>
</div>

<div class="z" id="ex5">
	<h2>RSA</h2>
	<h3>PublickKey(HEX)</h3>
	<h4>rsa_m</h4>
	<em>aa6efa10ca436173d9af82df8be8c6cc19a4564aef654b6cb0d6f8a90dafe7e0b29dd1642efa958e1c93f1afa594e43d190b5d2acdab18d794ca794c28cb93e163132d0c41da05566391f54c8508eef5b2094cb79fab53d1bbb9d501dda88c03ebfdd2453b5c9345592bc3cd90e0702fc191cc23e4833ceb75755216c414e021</em>
	<h4>rsa_e</h4>
	<em>10001</em>
	<h4>RSA('abc') HEX is</h4>
	<em>10001</em>
	<pre>

// 需要引入这几个库
// 来源：<a target="_blank" href="http://www-cs-students.stanford.edu/~tjw/jsbn/">http://www-cs-students.stanford.edu/~tjw/jsbn/</a>
&lt;script type="text/javascript" src="lib/jsbn.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="lib/prng4.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="lib/rng.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="lib/base64.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="lib/rsa.js"&gt;&lt;/script&gt;

&lt;script type="text/javascript"&gt
	var rsa_m = _$$('#ex5 em')[0].innerHTML;
	var rsa_e = _$$('#ex5 em')[1].innerHTML;
	var rsa = new RSAKey();
	rsa.setPublic(rsa_m, rsa_e);
	var r = rsa.encrypt("abc");
	_$$('#ex5 em')[2].innerHTML = r;
&lt;/script&gt;</pre>
</div>

<script type="text/javascript">

function _$(q){return typeof(q)=='string'?document.querySelector(q):q};
function _$$(q){return typeof(q)=='string'?document.querySelectorAll(q):q};

_$('#ex1>h3').innerHTML = encrypt.md5('abc');
_$('#ex2>h3').innerHTML = encrypt.sha1('abc');

_$('#ex3 input[type="file"]').onchange = function(){
	if(!this.files.length) return;
	var reader = new FileReader();
	_$('#ex3>h3').innerHTML = this.files[0].name + ' computing...';
	reader.onload = function(){
		_$('#ex3>h3').innerHTML
			= 'sha1: ' + encrypt.sha1(this.result) + '<br>'
			+ 'md5: ' + encrypt.md5(this.result)
			;
	};
	reader.readAsArrayBuffer(this.files[0]);
	this.value = null;
};

var hashType = 'sha1';
var radios = _$$('#ex4 input[type="radio"]');
for(var i = 0; i < radios.length; i++){
	radios[i].onclick = function(){
		hashType = this.value;
	};
}

_$('#ex4 input[type="file"]').onchange = function(){
	if(!this.files.length) return;
	_$('#ex4>h3').innerHTML = this.files[0].name + ' computing...';

	var pos = 0;
	var blockSize = 51200;
	var blob = this.files[0];
	var b = blob.slice(pos, pos + blockSize);
	pos += b.size;
	var helper = encrypt.createHelper(hashType, blob.size);

	function read(){
		var reader = new FileReader();
		reader.onload = function(){
			var arr = new Uint8Array(this.result);
			// to binL/B
			helper.hash(arr);
			_$('#ex4>h3').innerHTML = Math.round(pos / blob.size * 100) + '%';
			if(pos >= blob.size){
				// if eof, the helper must be fin
				helper.fin(arr.length);
				// core cal
				helper.cal();

				// to string
				var hash = helper.hex();
				_$('#ex4>h3').innerHTML = hashType + ': ' + hash;

			} else {
				// core cal
				helper.cal();
				b = blob.slice(pos, pos + blockSize);
				pos += b.size;
				read();
			}
		};
		reader.readAsArrayBuffer(b);
	};

	read();
	this.value = null;
};

var rsa_m = _$$('#ex5 em')[0].innerHTML;
var rsa_e = _$$('#ex5 em')[1].innerHTML;
var rsa = new RSAKey();
rsa.setPublic(rsa_m, rsa_e);
var r = rsa.encrypt("abc");
_$$('#ex5 em')[2].innerHTML = r;
// _$('#ex5 pre').innerHTML = r;
// _$$('#ex5 em')[0].innerHTML = rsa_m.replace(/.{64}/g, function(m){
// 	return m + '<br>';
// });
</script>

</body>
</html>